$yh:"Microsoft yahei";
$base_bg:#fff;
$base_color:#ff5f16; // 主题色  


// 变量  $yh  $base_color  
// 嵌套  
// 函数  

@import "animate.css";
@import "common.scss";
@import "mobile.scss";
@import "fonts/iconfont.css";
@import "swiper.min.css";

.page {
    width: 100%;
    height: 100%;

}

html,
body,
#root,
.App {
    width: 100%;
    height: 100%;
    
}



.box {
    padding: 0 0 0 0;

    .spage {
        padding: 46px 0 0 0;
    }

    .main {
        width: 100%;
        height: 100%;
    }

    .main-box {
        width: 100%;
        height: 100%;
        padding: 46px 0 45px 0;
    }


    @keyframes moveIn {
        from {
            transform: translateY(5%);
            opacity: 0;
        }

        to {
            transform: translateY(0%);
            opacity: 1;
        }
    }

    @keyframes moveOut {
        0% {
            transform: translateY(0%);
            opacity: 1;
        }

        100% {
            transform: translateY(5%);
            opacity: 0;
        }
    }

    .move-enter-active {
        animation: moveIn 0.4s;
    }

    .move-leave-active {
        animation: moveOut 0.4s;

    }

    // .box{
    //     padding-top:50px;
    // }




    // .slider {
    //     display: block;
    //     position: absolute;
    //     bottom: 0;
    //     left: 0;
    //     height: 4px;
    //     background: #1685D3;
    //     transition: all 0.5s;
    // }

    .ripple {
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        position: absolute;
        opacity: 1;
    }

    .rippleEffect {
        -webkit-animation: rippleDrop .4s linear;
        animation: rippleDrop .4s linear;
    }

    @-webkit-keyframes rippleDrop {
        100% {
            -webkit-transform: scale(2);
            transform: scale(2);
            opacity: 0;
        }
    }

    @keyframes rippleDrop {
        100% {
            -webkit-transform: scale(2);
            transform: scale(2);
            opacity: 0;
        }
    }

    .loginbtn {
        width: 120px;
        height: 50px;
        /* position: relative; */
        background: #1685D3;
        outline: line;
        /* overflow: hidden; */
    }

    // 动态切换   

    @keyframes move-out {
        from {
            transform: translateY(0);
            opacity: 1;
        }

        to {
            transform: translateY(5%);
            opacity: 0;
        }
    }

    @keyframes move-in {
        from {
            transform: translateY(5%);
            opacity: 0;
        }

        to {
            transform: translateY(0%);
            opacity: 1;
        }
    }

    .slide-enter-active {
        animation: move-in .3s;
    }

    .slide-leave-active {
        animation: move-out .3s;
    }
}